<!--
	富文本框
-->
<template>
  <div class="editor">
    <input type="file" style="display:none;" id="input" @change.prevent="upLoad()"/>
    <input type="file" style="display:none;" id="videoInput" @change.prevent="upLoadVideo()"/>
    <quill-editor
      v-model="contentValue"
      class="quill-editor ql-editor"
      ref="myQuillEditor"
      style="padding-top:0; display: flex; flex-direction: column;"
      :content="contentValue"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <span class="wordNumber">{{TiLength}}/4000</span>
  </div>
</template>

<script>
import {upload} from '@/api/file'
  import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
  import { quillEditor, Quill } from 'vue-quill-editor' // 调用富文本编辑器
  import { ImageExtend } from 'quill-image-extend-module'
  import { ImageDrop } from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'
  Quill.register('modules/imageExtend', ImageExtend);
  Quill.register('modules/imageResize', ImageResize);
  Quill.register('modules/imageDrop', ImageDrop);
  export default {
    props: {
      content: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      content: function(oldV, newV) {
        this.contentValue = oldV
      }
    },
    components: {
      quillEditor
    },
    data() {
      return {
        contentValue: '',
        imgUrl:process.env.VUE_APP_IMAGE_BASE_URL,
        flag: true, // 初始化富文本
        TiLength: 0,
        editorOption: {
          placeholder: "",
          modules: {
            toolbar: { // 菜单栏（工具栏），手动配置自己需要的富文本功能
              container: [
                ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
                [{ indent: "-1" }, { indent: "+1" }], // 左右缩进
                [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
                [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
                [{ align: [] }], //对齐方式
                ["image", "video"], //上传图片、上传视频
              ],
              handlers: {
                'image': function (value) { // 劫持图片上传，自定义图片上传
                  if (value) {
                      // 通过input的type=file唤醒选择弹框，选择之后自定义上传路径
                    document.querySelector('#input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                },
                'video':function(val){
                  console.log('video',val)
                  if (val) {
                      // 通过input的type=file唤醒选择弹框，选择之后自定义上传路径
                    document.querySelector('#videoInput').click()
                  } else {
                    this.quill.format('video', false);
                  }
                }
              }
            },
            imageResize:{ // 图片缩放比例
              displayStyles:{
                  backgroundColor:'black',
                  border:'none',
                  color:'white'
              },
              modules:['Resize','DisplaySize', 'Toolbar'] // Resize 允许缩放， DisplaySize 缩放时显示像素 Toolbar 显示工具栏
            }
          }
        },
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      }
    },
    created () {
      this.contentValue = this.content
    },
    mounted() {
      this.pastePic();
    },
    methods: {
      onEditorReady(editor) {
        // 准备编辑器
      },
      onEditorBlur() {}, // 失去焦点事件
      // 获得焦点事件
      onEditorFocus(e) {
        e.enable(!this.disabled); // 禁用文本框
      },
      // 内容改变事件
      onEditorChange(val) {
        if (this.flag) {
          this.flag = false
          setTimeout(()=>{
            this.$refs.myQuillEditor.quill.setSelection(val.html.length + 1)
            this.TiLength = this.TiLength=val.quill.getLength()-1
          },20)
        }
        this.$emit('update', {value: val.html}) // 触发事件，将富文本框中的值传递出去
        this.contentValue = val.html
        val.quill.deleteText(4000,4);
        if(this.contentValue==''){
          this.TiLength=0
        }else{
          this.TiLength=val.quill.getLength()-1
        }

      },
      upLoad() {
        let files = window.event.target.files[0];
        if (files.size / 1024 / 1024 > 10) { // 定义上传的图片的大小
          // this.$message.warning('请上传小于10M的文件');
          return;
        }
        let fileType = ['.jpg', '.png'];
        let suffix = files.name.substring(
          files.name.lastIndexOf('.'),
          files.name.length
        );
        if (fileType.indexOf(suffix) === -1) {
          this.$message.warning('请上传格式为png、jpg的文件');
          return;
        }
        // 自定义上传路径，根据需求上传到对应的服务器，本公司使用的是上传到ali-oss

        this.handleUpload(files,'image');
      },
      // 上传视频
      upLoadVideo() {
        let files = window.event.target.files[0];
        // if (files.size / 1024 / 1024 > 2) { // 定义上传的图片的大小
        //   // this.$message.warning('请上传小于5M的文件');
        //   return;
        // }
        let fileType = ['.mp4'];
        let suffix = files.name.substring(
          files.name.lastIndexOf('.'),
          files.name.length
        );
        if (fileType.indexOf(suffix) === -1) {
          this.$message.warning('请上传格式为mp4的视频文件');
          return;
        }
        // 自定义上传路径，根据需求上传到对应的服务器，本公司使用的是上传到ali-oss

        this.handleUpload(files,'video');
      },
      // 上传到阿里云服务器
      handleUpload(files,name) {

        let formData = new FormData();
        formData.append( "file", files);
        upload(formData)
          .then((res) => { // 上传成功之后的回调
            // 获取光标所在位置
            this.$message.success('上传成功');
            console.log('上传成功',res)
            let length = this.editor.getSelection().index;
            // 插入图片  res.info为服务器返回的图片地址
            this.editor.insertEmbed(length, name,this.imgUrl+ res.data.path)
            // 调整光标到最后
            this.editor.setSelection(length + 1)
          })
          .catch((files) => {
            this.$message.warning('上传失败');
          });
      },
      // 截屏粘贴到富文本框
      pastePic() {
        // 页面加载之后就监听粘贴事件paste
        this.editor.root.addEventListener('paste', evt => {
          if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
              evt.preventDefault();
              [].forEach.call(evt.clipboardData.files, file => {
                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                      return;
                  }
                  this.handleUpload(file);
              });
          }
        }, false);
      },
    }
  }
</script>
<style lang="scss">
  .editor {
    position: relative;
    .ql-toolbar{
      border: 1px solid #CDCFD4;
      height: 40px;
      background: #F0F2F5;
    }
    .ql-editor{
      min-height:240px;
      padding: 0;
      padding-top: 15px;
      box-sizing: border-box;
    }
    .ql-container {
      img {
        display: block;
      }
    }
    .wordNumber {
      position: absolute;
      right: 13px;
      bottom: 15px;
      color: #666666;
      font-size: 14px;
    }
  }
</style>
